import classNames from 'classnames';

/*
- type 属性没有图标名提示
- 不能添加类名修改图标大小
- 不能注册点击事件
 */
type Props = {
  type: IconType;
  // className?: string;
  // 支持style属性，不确定类型，借鉴antd或者原生的DOM
  // style?: React.CSSProperties;
  // onClick?: () => void;
  // 支持额外的剩余属性的写法；索引类型--用来穿透props
  // [key: string]: any;
} & React.SVGProps<SVGSVGElement>;

export default function Icon({ type, ...rest }: Props) {
  return (
    <svg
      onClick={rest.onClick}
      className={classNames('icon', rest.className)}
      aria-hidden="true"
    >
      <use xlinkHref={`#${type}`}></use>
    </svg>
  );
}

// 添加图标 type 类型
type IconType =
  | 'iconphoto-fail'
  | 'iconphoto'
  | 'iconbtn_right'
  | 'iconicon_unenjoy1'
  | 'iconicon_feedback1'
  | 'iconicon_upload'
  | 'iconbianji'
  | 'icongengduo'
  | 'iconfanhui'
  | 'iconbtn_history1'
  | 'iconbtn_readingtime'
  | 'iconbtn_like2'
  | 'iconbtn_pic'
  | 'iconbtn_mine'
  | 'iconbtn_channel'
  | 'iconbtn_channel_close'
  | 'iconbtn_comment'
  | 'iconbtn_home_sel'
  | 'iconbtn_collect_sel'
  | 'iconbtn_mine_sel'
  | 'iconbtn_collect'
  | 'iconbtn_qa_sel'
  | 'iconbtn_like_sel'
  | 'iconbtn_feedback'
  | 'iconbtn_del'
  | 'iconbtn_tag_close'
  | 'iconbtn_essay_close'
  | 'iconbtn_qa'
  | 'iconbtn_myworks'
  | 'iconicon_blacklist'
  | 'iconbtn_mycollect'
  | 'iconbtn_video_sel'
  | 'iconbtn_share'
  | 'iconbtn_mymessages'
  | 'iconbtn_search'
  | 'iconbtn_like'
  | 'iconbtn_xiaozhitongxue'
  | 'iconbtn_video'
  | 'iconbtn_home';
